<template>
    <div>
        <div class="header">
            <form action="/">
                <van-search
                        v-model="value"
                        show-action
                        placeholder="请输入搜索关键词"
                        @search="onSearch"
                        @cancel="onCancel"
                        @input="input"
                />
            </form>

            <div v-if="flag" class="hotTitle">
                <h2 style="color:red">云上</h2>
                <div v-for="(item,index) in hotlist" :key="item.articleId" class="title"><span>{{index+1}}</span>&nbsp;
                    <span @click="selectNews(item.articleId)">{{item.title}}</span></div>

            </div>
            <div v-else>

<!--                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
<!--                    <van-list-->
<!--                            v-model="loading"-->
<!--                            finished-text="没有更多了"-->
<!--                            @load="concatLoad"-->
<!--                    >-->
                        <div class="mylist" v-for="(item,index) in listTitleList" :key="index" style="display:flex" sticky :offset-top="0">
                            <div class="newsleft">
                                <img :src="item.bannerImgUrl" alt="">
                            </div>
                            <div class="newsright" >
                                <div style="overflow: hidden">
                                    <span class="pull-left">{{item.articleSource}}</span>
                                    <span class="pull-right" @click="selectNews(item.articleId)">了解更多></span>
                                </div>
                                <div v-html="item.title" style="margin-top:10px;text-align:left;"></div>
                                <div v-html="item.createTime" style="position: absolute;bottom:6px"></div>
                            </div>
                        </div>
<!--                    </van-list>-->
<!--                </van-pull-refresh>-->
            </div>

        </div>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import {NewslistTitle, hotNewslist} from '../api/api'
    export default {
        name: "selectNews",
        data() {
            return {
                val:"",
                value: '',
                hotlist:[],
                flag:true,
                listTitleList:[],
                // loading: false,
                // finished: false,
                // refreshing: false,
                num:1,
                // listnum:20,
                id:"",
                set:null,
            };
        },
        methods: {
            onSearch(val) {
                this.val=val;
                this.flag=false;

                this.set=setInterval(() => {
                    this.refreshing = false;
                    NewslistTitle(this.num,10,this.val).then(res=>{
                        this.listTitleList=this.listTitleList.concat(res.rows);
                        this.num+=1;
                        if(this.num==5){
                            console.log("5了");
                            clearInterval(this.set);
                        }
                        console.log(this.num);
                        if(res.rows.length==0){
                            clearInterval(this.set);
                            this.loadinglist=false;
                            Toast("数据走丢啦！");


                        }
                        if(res.rows.length<10){
                        clearInterval(this.set);

                        }
                    })


                    // this.loading = false;
                    // this.finished = true;
                }, 1000);

            },
            onCancel() {
                // Toast('取消');
                this.$router.push({path:'/myapp/home'})
            },
            input(val){
                if(!val){
                    this.listTitleList=[]
                }
            },
            // onLoad() {
            //     setTimeout(() => {
            //         this.refreshing = false;
            //         NewslistTitle(1,10,this.val).then(res=>{
            //             this.listTitleList=res.rows;
            //             this.num+=1;
            //         })
            //         this.loading = false;
            //         this.finished = true;
            //     }, 1000);
            // },

            // concatLoad() {
            //     setTimeout(() => {
            //         this.refreshing = false;
            //         NewslistTitle(1,10,this.val).then(res=>{
            //             this.listTitleList=this.listTitleList.concat(res.rows);
            //             this.num+=1;
            //             // if(res.rows.length==0){
            //             //
            //             // }
            //         })
            //         this.loading = false;
            //         this.finished = true;
            //     }, 1000);
            //
            // },
            // onRefresh() {
            //     // 清空列表数据
            //     this.finished = false;
            //     // 重新加载数据
            //     // 将 loading 设置为 true，表示处于加载状态
            //     this.loading = true;
            //     this.onLoad();
            //
            // },

            selectNews(articleId){
                this.$router.push({path:'/newsInfo',query:{id:articleId}})
            }



        },
        created() {
            hotNewslist(1,10).then(res=>{
                this.hotlist=res.rows;
                // this.loadinglist=false;
            })
        },







    }
</script>

<style scoped>

   .van-search--show-action{
        background-color: rgb(238,10,36);
    }
   .van-search__content{
       border-radius: 16px;
   }
   .van-search__action{
       color:white;
       font-size: 16px;
   }
   .hotTitle{
       padding:6px;
   }
   .title{
       padding:5px 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   .title>span:nth-child(1){
       text-align: center;
       color:red;
       font-weight: 700;
   }







   .mylist{
       display: flex;
   }
   .mylist>div{
       box-sizing: border-box;
   }
   .newsleft{
       width:45%;
       padding:5px;
   }
   .newsleft>img{
       width:100%;
       height:110px;
       min-height: 110px;

   }
   .newsright{
       position: relative;
       width:55%;
       padding:5px;
       font-size:14px;
   }
   .pull-left{
       float:left;
       color:red;
   }
   .pull-right{
       float:right;
       color: #ccc;
   }
</style>